<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>“匠小二”全系列产品知识考核 (V5.0 - 最终飞书版)</title>

    <style>

        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');



        :root {

            --primary-color: #007bff;

            --primary-hover-color: #0056b3;

            --secondary-color: #6c757d;

            --correct-color: #28a745;

            --wrong-color: #dc3545;

            --neutral-bg: #f8f9fa;

            --text-color: #212529;

            --light-text-color: #ffffff;

            --border-color: #dee2e6;

            --shadow-color: rgba(0, 0, 0, 0.1);

        }



        body {

            font-family: 'Noto Sans SC', sans-serif;

            background-color: var(--neutral-bg);

            color: var(--text-color);

            display: flex;

            justify-content: center;

            align-items: flex-start;

            min-height: 100vh;

            margin: 0;

            padding: 20px;

            box-sizing: border-box;

        }



        .container {

            background-color: var(--light-text-color);

            border-radius: 15px;

            box-shadow: 0 4px 20px var(--shadow-color);

            width: 100%;

            max-width: 800px;

            overflow: hidden;

            margin-top: 20px;

            margin-bottom: 20px;

        }



        .quiz-header {

            background-color: var(--primary-color);

            color: var(--light-text-color);

            padding: 20px 30px;

            text-align: center;

        }



        .quiz-header h1 { margin: 0; font-size: 1.8em; }

        

        #start-container { text-align: center; }

        #start-container h2 { margin-top: 0; font-size: 1.6em; color: var(--text-color); }



        #name-input {

            width: 80%;

            max-width: 400px;

            padding: 15px;

            font-size: 1.2em;

            border-radius: 8px;

            border: 2px solid var(--border-color);

            margin-top: 20px;

            margin-bottom: 30px;

            text-align: center;

        }

        

        #progress-container {

            padding: 15px 30px;

            font-size: 1em;

            color: #6c757d;

            border-bottom: 1px solid var(--border-color);

            display: flex;

            justify-content: space-between;

        }



        .quiz-body { padding: 30px; }

        

        #question-title { font-size: 1.1em; font-weight: 700; color: var(--primary-color); margin-bottom: 10px; }

        #question-text { font-size: 1.4em; font-weight: 500; line-height: 1.6; margin: 0; }



        .btn-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 20px; }

        .input-container { margin-top: 20px; }



        .text-input, .textarea-input {

            width: 100%;

            padding: 15px;

            font-size: 1.1em;

            border-radius: 8px;

            border: 2px solid var(--border-color);

            box-sizing: border-box;

            font-family: 'Noto Sans SC', sans-serif;

        }

        

        .textarea-input { min-height: 150px; resize: vertical; }



        .btn {

            background-color: var(--light-text-color);

            border: 2px solid var(--border-color);

            border-radius: 8px;

            padding: 15px;

            font-size: 1.1em;

            font-family: 'Noto Sans SC', sans-serif;

            text-align: left;

            cursor: pointer;

            transition: background-color 0.3s, border-color 0.3s, transform 0.1s;

            width: 100%;

        }



        .btn.selected { background-color: #e7f3fe; border-color: var(--primary-color); }

        .btn:hover:not([disabled]) { background-color: #e9ecef; border-color: var(--primary-color); }

        .btn:active:not([disabled]) { transform: scale(0.98); }

        .btn.correct { background-color: var(--correct-color); border-color: var(--correct-color); color: var(--light-text-color); }

        .btn.wrong { background-color: var(--wrong-color); border-color: var(--wrong-color); color: var(--light-text-color); }

        .btn[disabled] { cursor: not-allowed; }



        #feedback-container { margin-top: 20px; padding: 15px; border-radius: 8px; font-size: 1.1em; line-height: 1.6; }

        #feedback-container.correct-feedback { background-color: #e9f7ec; border-left: 5px solid var(--correct-color); color: #155724; }

        #feedback-container.wrong-feedback { background-color: #f8d7da; border-left: 5px solid var(--wrong-color); color: #721c24; }

        #feedback-container.info-feedback { background-color: #e7f3fe; border-left: 5px solid var(--primary-color); color: #0c5460; }

        .feedback-title { font-weight: 700; display: block; margin-bottom: 5px; }



        .controls { display: flex; justify-content: flex-end; padding: 20px 30px; border-top: 1px solid var(--border-color); }

        .control-btn { background-color: var(--primary-color); color: var(--light-text-color); border: none; border-radius: 8px; padding: 12px 30px; font-size: 1.2em; font-weight: 500; cursor: pointer; transition: background-color 0.3s; }

        .control-btn:hover { background-color: var(--primary-hover-color); }

        .control-btn:disabled { background-color: var(--secondary-color); cursor: not-allowed; }

        .control-btn.secondary { background-color: #17a2b8; }

        .control-btn.secondary:hover { background-color: #138496; }



        .hide { display: none; }

        

        #results-container { padding: 30px; }

        #results-container h2 { font-size: 2em; margin-bottom: 20px; text-align: center; }

        .results-section { margin-bottom: 40px; }

        .results-section h3 { font-size: 1.5em; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; margin-bottom: 20px; }

        #score-display { text-align: center; margin-bottom: 30px; }

        #score-text { font-size: 3em; font-weight: 700; color: var(--primary-color); }

        

        .review-item { background-color: #fff; border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; margin-bottom: 20px; }

        .review-item.wrong-item { background-color: #fff9fa; border-color: #f5c6cb; }

        .review-item p { margin: 0 0 10px 0; font-size: 1.1em; line-height: 1.6; word-break: break-word; }

        .review-item .question { font-weight: 700; }

        .review-item .answer-label { font-weight: 500; color: #495057; }

        .review-item .correct-answer { color: var(--correct-color); font-weight: 500; }

        .review-item .user-answer.wrong { color: var(--wrong-color); text-decoration: line-through; }

        .review-item .explanation { color: #6c757d; font-size: 1em; margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border-color); }

        

        #feishu-results-section { text-align: center; padding: 20px; }

        #feishu-results-section p { margin-bottom: 20px; font-size: 1.1em; }



    </style>

</head>

<body>



    <div id="app-container" class="container">

        

        <div id="start-container">

             <div class="quiz-header">

                <h1>“匠小二”全系列产品知识考核</h1>

            </div>

            <div style="padding: 40px 30px; text-align: center;">

                <h2>准备开始考试</h2>

                <p style="color: var(--secondary-color);">请输入您的姓名以开始</p>

                <input type="text" id="name-input" placeholder="在此输入姓名">

                <button id="start-btn" class="control-btn">开始考试</button>

            </div>

        </div>



        <div id="quiz-container" class="hide">

            <div id="quiz-content">

                <div id="progress-container">

                    <span id="progress-text"></span>

                    <span id="question-type-text"></span>

                </div>

                <div class="quiz-body">

                    <div id="question-title"></div>

                    <p id="question-text">问题加载中...</p>

                    <div id="answer-area">

                        <div id="answer-buttons" class="btn-grid"></div>

                        <div id="input-container" class="input-container hide">

                            <input type="text" id="fill-in-input" class="text-input" placeholder="请输入答案">

                            <textarea id="short-answer-input" class="textarea-input" placeholder="请输入您的回答"></textarea>

                        </div>

                    </div>

                    <div id="feedback-container" class="hide"></div>

                </div>

                <div class="controls">

                    <button id="control-btn" class="control-btn">提交</button>

                </div>

            </div>

        </div>



        <div id="results-container" class="hide">

            <h2>考核完成！</h2>

            

            <div id="auto-graded-section" class="results-section">

                <h3>自动评分结果</h3>

                <div id="score-display">

                    <p style="font-size: 1.2em;">选择题与填空题得分：</p>

                    <p id="score-text">0</p>

                </div>

                <div id="wrong-answers-list"></div>

            </div>



            <div id="manual-review-section" class="results-section">

                <h3>简答题回顾 (请手动阅卷)</h3>

                <div id="short-answers-list"></div>

            </div>



            <div id="feishu-results-section" class="results-section">

                <h3>发送考试结果</h3>

                <p>点击下方按钮，将本次考试结果发送到飞书群聊。</p>

                <button id="feishu-results-btn" class="control-btn secondary">发送结果到飞书</button>

            </div>

        </div>

    </div>



    <script>

        // --- 全量题库 ---

        const questions = [

            // 选择题

            { type: 'multiple-choice', question: "“拾露”茶台的核心产品概念是？", answers: [{ text: "一件未来的传家之物", correct: false }, { text: "可迁徙的“精神锚点”", correct: true }, { text: "一份完美的孝心礼物", correct: false }, { text: "阳台的终极解决方案", correct: false }], explanation: "“拾露”茶台的核心概念是成为用户人生变迁中的情感伴侣和归属感来源，因此被称为“可迁徙的精神锚点”。" },

            { type: 'multiple-choice', question: "“时隅”茶桌的核心购买人群（沟通对象）是？", answers: [{ text: "追求个性的年轻新贵", correct: false }, { text: "50-65岁以上的退休父母", correct: false }, { text: "有孝心、有经济实力的子女", correct: true }, { text: "资深品茶爱好者", correct: false }], explanation: "“时隅”的定位是“给爸妈买的礼物”，因此主要沟通对象是为父母选购的子女。" },

            { type: 'multiple-choice', question: "“拾露”茶台在宣传中，强调其能陪伴用户从90平米的刚需房搬入200平米的改善居所，这体现了其什么特性？", answers: [{ text: "多功能性", correct: false }, { text: "高性价比", correct: false }, { text: "可迁徙性", correct: true }, { text: "适老化设计", correct: false }], explanation: "能陪伴用户搬家，体现了其物理上和情感上的“可迁徙性”。" },

            { type: 'multiple-choice', question: "“时隅”茶桌选用的特色奢石是？", answers: [{ text: "蓝翡翠奢石", correct: false }, { text: "香雪梅奢石", correct: false }, { text: "云母绿奢石", correct: true }, { text: "潘多拉奢石", correct: false }], explanation: "“时隅”茶桌搭配的是宛如山水画卷的“云母绿奢石”。" },

            { type: 'multiple-choice', question: "“不是所有茶台，都配得上你的颠沛流离”这句深入人心的宣传语，是为哪款产品打造的？", answers: [{ text: "砚秋", correct: false }, { text: "云栖", correct: false }, { text: "时隅", correct: false }, { text: "拾露", correct: true }], explanation: "这句宣传语精准地抓住了“拾露”陪伴用户奋斗、迁徙的核心情感价值。" },

            { type: 'multiple-choice', question: "“时隅”茶桌在设计上提出的“适老化功能系统”提案中，不包括以下哪项功能？", answers: [{ text: "烧水壶沸腾声光提醒模块", correct: false }, { text: "台面边缘夜光涂层", correct: false }, { text: "桌面整体自动升降", correct: true }, { text: "子女可通过APP查看用水量", correct: false }], explanation: "提案中未包含桌面整体自动升降功能，此功能实现复杂且成本极高。" },

            { type: 'multiple-choice', question: "“拾露”茶台的组合材质不包含以下哪种？", answers: [{ text: "马鞍皮", correct: false }, { text: "烟熏碳化木皮", correct: true }, { text: "香雪梅奢石", correct: false }, { text: "镜面玫瑰金", correct: false }], explanation: "烟熏碳化木皮是“砚秋”、“时隅”等产品的材质，“拾露”不使用此材质。" },

            { type: 'multiple-choice', question: "“时隅”茶桌的营销故事核心情节是？", answers: [{ text: "事业伙伴在茶室一见如故", correct: false }, { text: "新手妈妈在育儿间隙获得喘息空间", correct: false }, { text: "子女为不愿搬离老宅的父亲购置礼物", correct: true }, { text: "都市情侣在阳台享受二人世界", correct: false }], explanation: "核心故事围绕子女为坚守老宅的父亲送去一份兼具关怀与品质的礼物展开。" },

            { type: 'multiple-choice', question: "为“拾露”茶台策划的附加服务中，当用户搬家时，品牌会赠送惊喜礼品，这个服务被称为？", answers: [{ text: "一张搬迁卡", correct: false }, { text: "一份时光献礼", correct: true }, { text: "礼宾服务", correct: false }, { text: "双模式刻字", correct: false }], explanation: "这个服务被命名为“一份时光献礼”，旨在强化品牌与用户共同成长的情感链接。" },

            { type: 'multiple-choice', question: "“时隅”茶桌的大面积奢石台面，主要解决了传统木茶桌的哪个痛点？", answers: [{ text: "款式容易过时", correct: false }, { text: "风格搭配困难", correct: false }, { text: "怕水、怕烫、易开裂", correct: true }, { text: "价格过于昂贵", correct: false }], explanation: "奢石台面天然耐用，完美解决了传统木质茶桌怕水、怕烫、易开裂的三大核心痛点。" },

            { type: 'multiple-choice', question: "“拾露”茶台被比喻成一个陪伴用户穿越人生不同阶段的“时光胶囊”，其核心目标用户是？", answers: [{ text: "追求内心平静的成功人士", correct: false }, { text: "享受慢生活的资深人群", correct: false }, { text: "经历人生“迁徙”阶段的奋斗者", correct: true }, { text: "对传统文化有浓厚兴趣的收藏家", correct: false }], explanation: "其核心用户是那些生活状态在变化中，需要情感寄托和归属感的奋斗者。" },

            { type: 'multiple-choice', question: "“时隅”茶桌为体现对老年人使用的关怀，在提案中建议将台面高度降至？", answers: [{ text: "60cm", correct: false }, { text: "68cm", correct: true }, { text: "72cm", correct: false }, { text: "80cm", correct: false }], explanation: "提案建议将高度降至68cm，更符合老年人久坐的舒适度。" },

            { type: 'multiple-choice', question: "“拾露”茶台的名称释义中，“拾”代表拾起每个奋斗阶段的印记，“露”代表什么？", answers: [{ text: "对自然的向往", correct: false }, { text: "对精致生活的向往之光", correct: true }, { text: "对家族传承的重视", correct: false }, { text: "对内心宁静的追求", correct: false }], explanation: "“露”寓意着在奋斗中不灭的、对精致生活的向往之光。" },

            { type: 'multiple-choice', question: "“时隅”茶桌提出的“双模式刻字服务”不包括以下哪种形式？", answers: [{ text: "激光雕刻父母姓名篆章", correct: false }, { text: "镀金子女手写体祝福语", correct: false }, { text: "镶嵌客户提供的纪念品", correct: true }, { text: "以上均为提案中的刻字服务形式", correct: false }], explanation: "提案中未包含镶嵌客户提供的纪念品这一项，因其工艺复杂且风险不可控。" },

            { type: 'multiple-choice', question: "“拾露”茶台的移动性，在针对“新手妈妈”这一细分人群时，主要解决了什么问题？", answers: [{ text: "节省阳台空间", correct: false }, { text: "方便招待朋友", correct: false }, { text: "让“喘息角”可以随时跟随妈妈出现在家中不同地方", correct: true }, { text: "便于清洁打理", correct: false }], explanation: "对于需要时刻关注宝宝的新手妈妈，可移动的茶台能让她们的放松角落灵活地出现在客厅、卧室或阳台。" },

            { type: 'multiple-choice', question: "“时隅”茶桌的木质部分采用了什么工艺？", answers: [{ text: "高光烤漆", correct: false }, { text: "烟熏木皮", correct: true }, { text: "原木直拼", correct: false }, { text: "皮革包裹", correct: false }], explanation: "“时隅”的木质部分采用的是沉稳大气的“烟熏木皮”工艺。" },

            { type: 'multiple-choice', question: "“拾露”茶台在设计语言上，强调其经典材质组合使其不易过时，是为了呼应其哪个核心价值？", answers: [{ text: "作为“精神锚点”，在不同环境中依旧品位超然", correct: true }, { text: "作为“艺术品”，提升家居格调", correct: false }, { text: "作为“功能家具”，满足日常使用", correct: false }, { text: "作为“社交工具”，方便会客", correct: false }], explanation: "经典不过时的设计，才能保证它在用户漫长的人生迁徙中，始终是一个稳定且有品位的“精神锚点”。" },

            { type: 'multiple-choice', question: "“时隅”茶桌的营销文案中提到“最好的孝心，不是给他们多少钱，而是给他们一段被尊重、被热爱的晚年时光”，这句话旨在将购买行为与什么直接关联？", answers: [{ text: "购买者的审美情趣", correct: false }, { text: "购买者的经济实力", correct: false }, { text: "购买者的社交需求", correct: false }, { text: "购买者深层的“孝心”情感动机", correct: true }], explanation: "这句话的目的是将购买产品这一行为，升华为表达孝心、给予父母高品质晚年生活的情感表达。" },

            { type: 'multiple-choice', question: "“拾露”茶台在产品内部设置了隐藏文案，内容是？", answers: [{ text: "“你好，当你发现这行字时，我们匠小二已经成为家人了”", correct: true }, { text: "“生活，本该有一处温润的静好”", correct: false }, { text: "“它记得你所有的故事”", correct: false }, { text: "“敬每一次相逢，敬每一份懂得”", correct: false }], explanation: "这是品牌设置的彩蛋，旨在与用户建立更亲密的家人般的情感连接。" },

            { type: 'multiple-choice', question: "“时隅”茶桌在功能上强调“将繁琐隐藏”，主要通过什么设计实现？", answers: [{ text: "一体式烧水壶", correct: false }, { text: "超大容量的柜体设计", correct: true }, { text: "可移动的茶盘", correct: false }, { text: "圆角防撞的金属包边", correct: false }], explanation: "通过超大容量的柜体设计，可以将茶叶、茶具等杂物全部收纳，保持台面整洁，从而“将繁琐隐藏”。" },

            { type: 'multiple-choice', question: "“砚秋”茶桌的核心亮点不包括以下哪一项？", answers: [{ text: "经典耐看，品质取胜", correct: false }, { text: "桌面甄选顶级蓝翡翠奢石", correct: false }, { text: "专为年轻活力的用户设计", correct: true }, { text: "多功能一体，场景百搭", correct: false }], explanation: "“砚秋”的设计语言是“经典隽永”，主要面向追求品质与内涵的成熟用户，而非年轻活力的用户。" },

            { type: 'multiple-choice', question: "“云栖”茶桌主要面向哪种装修风格？", answers: [{ text: "传统中式", correct: false }, { text: "现代简约和轻奢风格", correct: true }, { text: "工业风", correct: false }, { text: "美式乡村", correct: false }], explanation: "“云栖”的烤漆工艺和异形设计，特别适合搭配现代简约、北欧风或轻奢风格的家居环境。" },

            { type: 'multiple-choice', question: "“听雪茶桌”的最大特点是什么？", answers: [{ text: "价格亲民", correct: false }, { text: "全奢石台面和异形切割", correct: true }, { text: "可折叠设计", correct: false }, { text: "采用全实木打造", correct: false }], explanation: "“听雪茶桌2”以全奢石台面为核心，并大胆采用异形切割与洗缺口工艺，这是其最显著的设计特点。" },

            { type: 'multiple-choice', question: "针对客户对“听雪茶桌2”全奢石台面易碎的顾虑，以下哪个回应是不正确的？", answers: [{ text: "我们选用有一定厚度和韧性的奢石", correct: false }, { text: "我们提供专业的包装和上门安装服务", correct: false }, { text: "我们承诺运输或安装损坏由我方负责", correct: false }, { text: "奢石产品非常坚固，完全不会碎", correct: true }], explanation: "奢石虽坚固但仍是石材，在重物猛烈撞击下有损坏的可能。承诺“完全不会碎”是不科学、不负责任的说法。" },

            { type: 'multiple-choice', question: "'砚秋'茶桌的2.1米桌面宽度是多少？", answers: [{ text: "60cm", correct: false }, { text: "70cm", correct: true }, { text: "75cm", correct: false }, { text: "80cm", correct: false }], explanation: "根据产品资料，“砚秋”茶桌的桌面宽度是70cm。" },

            { type: 'multiple-choice', question: "'莫兰'茶桌的主要目标人群是？", answers: [{ text: "设计品鉴者", correct: true }, { text: "传统家庭", correct: false }, { text: "租房客", correct: false }, { text: "老年用户", correct: false }], explanation: "“莫兰”茶桌以其颠覆性的设计和空间利用哲学，主要吸引对家具颜值和设计感有极高要求的“设计品鉴者”。" },

            { type: 'multiple-choice', question: "'砚秋'茶桌的木皮工艺是什么？", answers: [{ text: "贴纸工艺", correct: false }, { text: "烟熏碳化木皮工艺", correct: true }, { text: "烤漆工艺", correct: false }, { text: "无任何处理", correct: false }], explanation: "“砚秋”茶桌搭配的是品牌引以为傲的“烟熏碳化木皮工艺”。" },

            { type: 'multiple-choice', question: "“砚秋”茶桌没有以下哪个尺寸？", answers: [{ text: "1.6米", correct: false }, { text: "1.8米", correct: false }, { text: "2米", correct: true }, { text: "2.1米", correct: false }], explanation: "根据资料，砚秋茶桌提供了1.6米、1.8米、2.1米等尺寸，但没有2米这个规格。" },

            { type: 'multiple-choice', question: "砚秋茶桌的桌面尺寸高度是多少？", answers: [{ text: "70cm", correct: false }, { text: "72cm", correct: true }, { text: "74cm", correct: false }, { text: "76cm", correct: false }], explanation: "根据产品资料，“砚秋”茶桌的桌面高度是72cm。" },

            { type: 'multiple-choice', question: "砚秋茶桌加上上面的烧水壶石材后的总共高度是多少？", answers: [{ text: "82cm", correct: false }, { text: "75cm", correct: false }, { text: "85cm", correct: false }, { text: "80cm", correct: true }], explanation: "桌面72cm，加上烧水壶石材部分约8cm，总高约为80cm。" },

            { type: 'multiple-choice', question: "听雪茶桌的桌脚顶部镶嵌了什么材质？", answers: [{ text: "黄金色铜", correct: false }, { text: "镜面玫瑰金套", correct: true }, { text: "白银", correct: false }, { text: "黑曜石", correct: false }], explanation: "桌脚顶部镶嵌镜面玫瑰金套是“听雪茶桌2”的标志性细节设计。" },

            { type: 'multiple-choice', question: "'莫兰'茶桌的宽度是多少？", answers: [{ text: "40cm", correct: false }, { text: "45cm", correct: false }, { text: "50cm", correct: true }, { text: "55cm", correct: false }], explanation: "“莫兰”茶桌的核心卖点之一就是其50cm的极限窄边设计。" },

            { type: 'multiple-choice', question: "以下哪项不是'砚秋'茶桌可以扮演的角色？", answers: [{ text: "雅致茶台", correct: false }, { text: "宽敞书桌", correct: false }, { text: "儿童游戏桌", correct: true }, { text: "实用的岛台", correct: false }], explanation: "“砚秋”定位为高端奢华家具，其材质和价值决定了它不适合作为儿童日常磕碰玩耍的游戏桌。" },

            { type: 'multiple-choice', question: "'云栖'茶桌的设计更侧重于哪个人群？", answers: [{ text: "55岁以上资深人群", correct: false }, { text: "45-55岁成熟人群", correct: false }, { text: "28-40岁年轻新贵", correct: true }, { text: "儿童", correct: false }], explanation: "“云栖”茶桌以其现代简约、轻奢风格和多功能设计，主要面向追求个性与时尚的28-40岁年轻新贵。" },

            { type: 'multiple-choice', question: "'听雪茶桌'的设计更适合什么样的空间？", answers: [{ text: "小户型客厅", correct: false }, { text: "独立书房、茶室或大阳台", correct: true }, { text: "办公室", correct: false }, { text: "餐厅", correct: false }], explanation: "“听雪茶桌2”作为一款彰显个性与奢华的艺术品级家具，需要有足够的空间来展示其设计感。" },

            { type: 'multiple-choice', question: "'砚秋'茶桌搭配的奢石是什么？", answers: [{ text: "雪山飞狐岩板", correct: false }, { text: "蓝翡翠奢石", correct: true }, { text: "意大利鱼肚白", correct: false }, { text: "巴西黑金石", correct: false }], explanation: "“砚秋”茶桌的一大核心亮点就是桌面甄选了顶级的“蓝翡翠奢石”。" },

            { type: 'multiple-choice', question: "对于“事业有成、追求品质与精神寄托的成熟人群”，以下哪个需求不是他们的核心需求？", answers: [{ text: "对材质、工艺、设计有极致追求", correct: false }, { text: "追求独特、有品味的个性化产品", correct: false }, { text: "极度关注产品的性价比和折扣", correct: true }, { text: "喝茶是放松、静心、社交的方式", correct: false }], explanation: "这类高端人群更关注产品的价值、品质和文化内涵，而非单纯的价格或折扣。" },

            { type: 'multiple-choice', question: "“莫兰”茶桌的设计理念是什么？", answers: [{ text: "占有空间", correct: false }, { text: "创造空间", correct: true }, { text: "节省空间", correct: false }, { text: "填充空间", correct: false }], explanation: "“莫兰”通过极限窄边设计，解放了动线，创造了全新的观景和社交场景，其理念是“创造空间”。" },

            { type: 'multiple-choice', question: "'砚秋'茶桌不适合以下哪类客户？", answers: [{ text: "追求沉稳格调的客户", correct: false }, { text: "偏爱经典款式的客户", correct: false }, { text: "希望茶桌功能多样的客户", correct: false }, { text: "追求独特、个性设计的年轻客户", correct: true }], explanation: "“砚秋”的设计语言是经典、沉稳，与追求独特、个性化设计的年轻客户的需求有所差异。" },

            { type: 'multiple-choice', question: "'云栖'茶桌的异形设计主要考虑了什么？", answers: [{ text: "运输方便", correct: false }, { text: "左右手用户的使用习惯", correct: true }, { text: "降低成本", correct: false }, { text: "模仿动物形态", correct: false }], explanation: "其异形设计在主要书写和操作区域对左右手用户都做了兼顾。" },

            { type: 'multiple-choice', question: "面对客户对奢石“天然瑕疵”的疑虑，应该如何解释？", answers: [{ text: "承认是产品质量问题，并承诺更换", correct: false }, { text: "解释这是天然材质的独特纹理和印记，是其魅力所在", correct: true }, { text: "告诉客户所有奢石都一样", correct: false }, { text: "建议客户不要购买奢石产品", correct: false }], explanation: "正确的做法是将“瑕疵”重塑为“天然印记”，并强调其独一无二的美学价值。" },

            { type: 'multiple-choice', question: "'听雪茶桌'的移动茶台和茶凳可以收纳在哪里？", answers: [{ text: "需要另外存放", correct: false }, { text: "可以收纳于桌下", correct: true }, { text: "可以折叠起来", correct: false }, { text: "厂家会回收", correct: false }], explanation: "其巧妙的设计使得移动茶台和茶凳均可完整收纳于桌下，保持环境整洁。" },

            { type: 'multiple-choice', question: "针对“享受生活、关注健康的资深人群”，在介绍产品时应侧重什么？", answers: [{ text: "产品的设计多么前卫", correct: false }, { text: "产品的智能科技功能", correct: false }, { text: "材质的环保性与结构的安全性", correct: true }, { text: "产品的收藏和升值潜力", correct: false }], explanation: "对于这个人群，健康和安全是首要关注点，因此应侧重介绍材质的环保性和结构的稳固安全。" },

            { type: 'multiple-choice', question: "“云栖”茶桌的烤漆工艺有什么优点？", answers: [{ text: "耐磨", correct: false }, { text: "哑光质感很好", correct: false }, { text: "镜面质感，光滑平整", correct: true }, { text: "以上都不对", correct: false }], explanation: "“云栖”采用的高品质烤漆工艺，表面光滑平整，呈现出现代感十足的镜面质感。" },

            { type: 'multiple-choice', question: "'听雪茶桌'的腿部采用了什么材质包裹？", answers: [{ text: "实木", correct: false }, { text: "金属", correct: false }, { text: "皮革", correct: true }, { text: "塑料", correct: false }], explanation: "腿部以细腻皮革包裹并搭配精致缝线，是“听雪茶桌2”的标志性细节。" },

            { type: 'multiple-choice', question: "面对“年轻新贵”客户群体，以下哪个产品特点最能吸引他们？", answers: [{ text: "中式雕花", correct: false }, { text: "'云栖'的现代简约和异形设计", correct: true }, { text: "'砚秋'的沉稳和经典", correct: false }, { text: "以上都不喜欢", correct: false }], explanation: "“年轻新贵”追求个性与现代审美，“云栖”的风格正中其下怀。" },

            { type: 'multiple-choice', question: "'莫兰'茶桌的设计师认为，创新的家具可以用来做什么？", answers: [{ text: "仅供休息", correct: false }, { text: "划分空间，增加家庭互动性", correct: true }, { text: "彰显财富", correct: false }, { text: "方便清洁", correct: false }], explanation: "“莫兰”的设计理念是通过家具创新来划分和创造空间，从而增加家庭的互动性。" },

            { type: 'multiple-choice', multi: true, question: "【多选】客户担心烤漆家具有气味和甲醛问题，我们应该如何回应？", answers: [{ text: "告诉客户这是正常现象，无法避免", correct: false, key: 'A' }, { text: "强调我们采用的是国际品牌环保烤漆，指标优于国标", correct: true, key: 'B' }, { text: "建议客户购买后保持通风", correct: true, key: 'C' }, { text: "否认有任何气味", correct: false, key: 'D' }], answer: ['B', 'C'], explanation: "正确的做法是强调使用高品质环保材料，并给出合理的建议（如通风），而不是否认或夸大问题。" },

            { type: 'multiple-choice', question: "在应对客户“价格超出预算”的问题时，以下哪个策略是不推荐的？", answers: [{ text: "强调产品的顶级材质与精湛工艺", correct: false }, { text: "解释原创设计的价值", correct: false }, { text: "立刻给出最大折扣", correct: true }, { text: "塑造产品所代表的高品质生活方式", correct: false }], explanation: "立刻给出最大折扣会降低品牌价值，正确的做法是进行价值塑造，让客户认可价格。" },

            { type: 'multiple-choice', question: "面对“年轻新贵”客户群体，以下哪个产品特点最能吸引他们？", answers: [{ text: "中式雕花", correct: false }, { text: "'云栖'的现代简约和异形设计", correct: true }, { text: "'砚秋'的沉稳和经典", correct: false }, { text: "以上都不喜欢", correct: false }], explanation: "“年轻新贵”追求个性与现代审美，“云栖”的风格正中其下怀。" },

            { type: 'multiple-choice', question: "'莫兰'茶桌的设计师认为，创新的家具可以用来做什么？", answers: [{ text: "仅供休息", correct: false }, { text: "划分空间，增加家庭互动性", correct: true }, { text: "彰显财富", correct: false }, { text: "方便清洁", correct: false }], explanation: "“莫兰”的设计理念是通过家具创新来划分和创造空间，从而增加家庭的互动性。" },

            { type: 'multiple-choice', multi: true, question: "【多选】客户担心烤漆家具有气味和甲醛问题，我们应该如何回应？", answers: [{ text: "告诉客户这是正常现象，无法避免", correct: false, key: 'A' }, { text: "强调我们采用的是国际品牌环保烤漆，指标优于国标", correct: true, key: 'B' }, { text: "建议客户购买后保持通风", correct: true, key: 'C' }, { text: "否认有任何气味", correct: false, key: 'D' }], answer: ['B', 'C'], explanation: "正确的做法是强调使用高品质环保材料，并给出合理的建议（如通风），而不是否认或夸大问题。" },

            { type: 'multiple-choice', question: "在应对客户“价格超出预算”的问题时，以下哪个策略是不推荐的？", answers: [{ text: "强调产品的顶级材质与精湛工艺", correct: false }, { text: "解释原创设计的价值", correct: false }, { text: "立刻给出最大折扣", correct: true }, { text: "塑造产品所代表的高品质生活方式", correct: false }], explanation: "立刻给出最大折扣会降低品牌价值，正确的做法是进行价值塑造，让客户认可价格。" },

            { type: 'multiple-choice', question: "'听雪茶桌'的移动茶台和茶凳可以收纳在哪里？", answers: [{ text: "需要另外存放", correct: false }, { text: "可以收纳于桌下", correct: true }, { text: "可以折叠起来", correct: false }, { text: "厂家会回收", correct: false }], explanation: "其巧妙的设计使得移动茶台和茶凳均可完整收纳于桌下，保持环境整洁。" },

            { type: 'multiple-choice', question: "针对“享受生活、关注健康的资深人群”，在介绍产品时应侧重什么？", answers: [{ text: "产品的设计多么前卫", correct: false }, { text: "产品的智能科技功能", correct: false }, { text: "材质的环保性与结构的安全性", correct: true }, { text: "产品的收藏和升值潜力", correct: false }], explanation: "对于这个人群，健康和安全是首要关注点，因此应侧重介绍材质的环保性和结构的稳固安全。" },

            

            // 填空题

            { type: 'fill-in', question: "“拾露”茶台的核心价值是它能陪你一起“______”，是一个“仪式感符号”。", answer: "搬家", explanation: "“搬家”是“可迁徙性”最直接的体现，也是其核心价值所在。" },

            { type: 'fill-in', question: "“时隅”茶桌是为懂茶之人打造的实用主义产品，其精准的1.3米/1.6米尺寸，是为中国主流户型______宽的阳台量身打造。", answer: "1.4米/1.7米", explanation: "产品尺寸设计充分考虑了中国主流户型的阳台宽度，体现了实用主义的设计思路。" },

            { type: 'fill-in', question: "“拾露”茶台的目标用户是28-45岁，正处于或经历过人生“______”阶段的奋斗者或家庭。", answer: "迁徙", explanation: "“迁徙”一词精准地概括了目标用户的生活状态，如换工作、搬家、城市间移动等。" },

            { type: 'fill-in', question: "“时隅”茶桌的营销策略，是将消费行为转化为爱的表达，例如不说“立即购买”，而说“即刻为他定制”或“送他一份______”。", answer: "时光献礼", explanation: "“时光献礼”这个说法将礼物赋予了时间和情感的价值，比单纯的购买更有温度。" },

            { type: 'fill-in', question: "“拾露”茶台的材质组合包括香雪梅奢石、______和镜面玫瑰金。", answer: "马鞍皮", explanation: "马鞍皮的温润质感是“拾露”茶台经典材质组合的重要组成部分。" },

            { type: 'fill-in', question: "“时隅”茶桌的设定故事中，子女为不愿搬离老宅的父亲购置茶桌，是因为父亲放不下街坊邻里和舍不得的______。", answer: "半生回忆", explanation: "“半生回忆”是故事的情感内核，解释了父亲坚守老宅的深层原因。" },

            { type: 'fill-in', question: "“拾露”茶台被形容为奋斗的温情见证，因为它记得你所有的______。", answer: "故事", explanation: "“故事”一词将产品人格化，使其成为用户人生经历的载体和见证者。" },

            { type: 'fill-in', question: "“时隅”茶桌在提案的“适老化功能系统”中，可通过子女APP端查看父母的______，体现了科技带来的关怀。", answer: "用水量/使用频率", explanation: "这是科技赋能孝心的具体体现，让子女能远程了解父母的活动情况。" },

            { type: 'fill-in', question: "“拾露”茶台的强大功能性体现在它能独立完成泡茶、______的所有功能，不依赖于外部环境。", answer: "储物", explanation: "自带储物功能，使其成为一个功能自足的移动茶空间。" },

            { type: 'fill-in', question: "“时隅”茶桌的价值主张之一是“一份健康的礼物”，鼓励父亲培养______这一有益身心的爱好。", answer: "品茶", explanation: "将产品与健康的生活方式（品茶）相结合，提升了礼物的价值和意义。" },



            // 问答题

            { type: 'short-answer', question: "请简述“拾露”茶台的“可迁徙的精神锚点”这一核心概念，并说明它如何与目标用户的特征相结合。", answer: "核心概念：“拾露”茶台不仅是家具，更是能跟随用户人生阶段变化（如搬家、身份转变）而移动的、提供情感归属和仪式感的物件。\n如何结合：其目标用户是处于奋斗和变迁阶段的人，生活状态可能不稳定。这款可移动、功能自足且设计经典的茶台，能让他们在任何新环境中快速建立一个熟悉的、属于自己的精致角落，从而获得精神上的稳定感和慰藉。" },

            { type: 'short-answer', question: "“时隅”茶桌在产品设计和营销叙事上是如何体现“孝心”这一核心价值的？请列举至少三点进行说明。", answer: "1. **营销叙事**：直接以“给爸妈买的礼物”为核心故事，将购买行为与表达孝心、给予父母“被尊重、被热爱的晚年时光”深度绑定。\n2. **产品设计**：大面积奢石台面解决了父母使用传统木桌怕烫怕水的烦恼（省心的礼物）；超大储物空间将杂物隐藏（体面的礼物）。\n3. **功能创新**：提出的“适老化功能系统”，如降低台面高度、声光提醒等，都是从老年用户使用习惯出发的贴心设计，是看得见的关怀。" },

            { type: 'short-answer', question: "请对比分析“拾露”茶台与“时隅”茶桌在核心情感定位和目标沟通对象上的主要区别。", answer: "**拾露**：\n- **情感定位**：奋斗路上的“温情见证”与“精致陪伴”，是一种平视的、伴侣式的情感连接。\n- **沟通对象**：直接与产品的使用者——正在经历人生“迁徙”的奋斗者对话。\n**时隅**：\n- **情感定位**：代际之间的“感恩回馈”与“尊敬关爱”，是一种仰视的、晚辈对长辈的情感表达。\n- **沟通对象**：主要与产品的购买者——有孝心的子女对话。" },

            { type: 'short-answer', question: "“时隅”茶桌提出的“适老化功能系统”是一大创新亮点，请列举其中的三项具体功能，并分析其背后体现出的对老年用户的关怀。", answer: "1. **声光提醒模块**：烧水壶沸腾时联动灯带，补偿老年人可能衰退的听觉。\n2. **圆角防撞金属包边+夜光涂层**：降低老年人（尤其在夜间）起夜时磕碰的风险。\n3. **子女APP端查看用水量**：让远方的子女能通过科技手段间接了解父母的居家活动情况，是一种无声的关怀。\n**背后关怀**：这些功能深入到对老年用户生理、安全和情感需求的细微洞察，体现了品牌极具人文精神的、深度的、科技化的孝心关怀。" },

            { type: 'short-answer', question: "“拾露”茶台的营销故事“不是所有茶台，都配得上你的颠沛流离”极具感染力。请结合其产品特点，分析这句宣传语为何能精准打动目标客户。", answer: "1. **精准共情**：“颠沛流离”一词精准概括了奋斗者在城市打拼、为生活奔波的状态，引发强烈情感共鸣。\n2. **价值提升**：它将“拾露”茶台从普通家具提升为能共患难的“战友”，赋予了极高的情感价值。\n3. **呼应产品特点**：“拾露”的可移动性、功能自足性和经典设计，使其确实能够“配得上”这种迁徙的生活，让宣传语有产品力支撑。" },

            { type: 'short-answer', question: "请简述‘砚秋’茶桌的设计理念、目标人群和核心卖点。", answer: "**设计理念**：回归材质与工艺的本真，追求“经典隽永”，打造一件实用主义的奢华家具。\n**目标人群**：35-55岁事业有成、追求品质与精神寄托的成熟人群。\n**核心卖点**：① 顶级材质（蓝翡翠奢石+烟熏碳化木皮）；② 多功能一体（茶台/书桌/岛台）；③ 经典耐看的设计。" },

            { type: 'short-answer', question: "如果一位客户既喜欢‘砚秋’的稳重，又欣赏‘云栖’的现代感，你会如何向他推荐产品？请阐述你的理由。", answer: "我会主推‘砚秋’，并从“融合”与“生活方式”入手。首先，强调‘砚秋’的经典设计具有很强的包容性，它的简洁线条和蓝翡翠奢石本身就带有现代艺术感，可以完美融入现代家装，成为一个有分量的“品质担当”，实现“稳重”与“现代”的和谐共存。其次，探讨客户的生活方式，如果他需要一个兼具会客、家庭中心功能的大气家具，‘砚秋’的多功能性是‘云栖’无法比拟的。最终引导客户思考，他更需要一件能定义空间气场的传世之作（砚秋），还是一件彰显个性的时尚单品（云栖）。" },

            { type: 'short-answer', question: "请结合“人群画像”中的“年轻新贵”的特点，为“云栖”茶桌设计一段营销文案。", answer: "“拒绝复刻，只为原创。为你的世界，划定不被定义的疆界。‘云栖’，不止是一张茶桌，更是你安放灵感的异形书桌，是你犒赏自己的私人吧台。在高效利用的方寸之间，安放你独一无二的审美与不落俗套的生活态度。这，是你掌控生活的宣言。”" },

            { type: 'short-answer', question: "[匠小二]品牌的核心价值是什么？你认为在与客户沟通时，应如何有效地传递这些价值？", answer: "**核心价值**：① 设计引领（原创艺术性）；② 极致工艺（匠心细节）；③ 全程服务（尊贵体验）；④ 价值认同（高品质生活方式）。\n**传递方式**：① **故事化叙事**：为产品赋予情感故事，建立共鸣。② **场景化营销**：描述产品在具体生活场景中的体验，激发向往。③ **价值塑造**：将对材质、工艺、设计的坚持，转化为对客户生活品味的尊重和认同，让客户感受到购买的不仅是家具，更是一种自我表达。" }

        ];



        // --- DOM Elements ---

        const startContainer = document.getElementById('start-container');

        const quizContainer = document.getElementById('quiz-container');

        const nameInput = document.getElementById('name-input');

        const startBtn = document.getElementById('start-btn');

        

        const questionElement = document.getElementById('question-text');

        const questionTitleElement = document.getElementById('question-title');

        const answerButtonsElement = document.getElementById('answer-buttons');

        const inputContainerElement = document.getElementById('input-container');

        const fillInInputElement = document.getElementById('fill-in-input');

        const shortAnswerInputElement = document.getElementById('short-answer-input');

        

        const controlButton = document.getElementById('control-btn');

        const resultsContainer = document.getElementById('results-container');

        const scoreTextElement = document.getElementById('score-text');

        const wrongAnswersListElement = document.getElementById('wrong-answers-list');

        const shortAnswersListElement = document.getElementById('short-answers-list');

        const feedbackContainer = document.getElementById('feedback-container');

        const progressTextElement = document.getElementById('progress-text');

        const questionTypeTextElement = document.getElementById('question-type-text');

        const feishuResultsBtn = document.getElementById('feishu-results-btn');



        // --- State Variables ---

        let userName = '';

        let startTime = null;

        let currentQuestionIndex = 0;

        let score = 0;

        let autoGradableQuestionsCount = 0;

        let answeredQuestions = [];

        const feishuWebhookUrl = 'https://open.feishu.cn/open-apis/bot/v2/hook/3c98e017-e2b7-46d7-84a3-c7040f311be3';



        // --- Functions ---

        function init() {

            startBtn.addEventListener('click', () => {

                userName = nameInput.value.trim();

                if (userName === '') {

                    alert('请输入您的姓名！');

                    return;

                }

                startTime = new Date();

                startContainer.classList.add('hide');

                quizContainer.classList.remove('hide');

                startQuiz();

            });



            controlButton.addEventListener('click', () => {

                const currentQuestion = questions[currentQuestionIndex];

                switch(currentQuestion.type) {

                    case 'fill-in':

                        handleFillInSubmit();

                        break;

                    case 'short-answer':

                        handleShortAnswerSubmit();

                        break;

                    case 'multiple-choice':

                        if (currentQuestion.multi) {

                            handleMultiChoiceSubmit();

                        }

                        break;

                }

            });



            feishuResultsBtn.addEventListener('click', sendToFeishu);

        }



        function startQuiz() {

            currentQuestionIndex = 0;

            score = 0;

            answeredQuestions = [];

            autoGradableQuestionsCount = questions.filter(q => q.type === 'multiple-choice' || q.type === 'fill-in').length;

            

            resultsContainer.classList.add('hide');

            showQuestion();

        }



        function showQuestion() {

            resetState();

            const currentQuestion = questions[currentQuestionIndex];

            

            progressTextElement.innerText = `问题 ${currentQuestionIndex + 1} / ${questions.length}`;

            questionElement.innerText = currentQuestion.question;



            switch (currentQuestion.type) {

                case 'multiple-choice':

                    questionTitleElement.innerText = currentQuestion.multi ? '选择题 (多选)' : '选择题 (单选)';

                    questionTypeTextElement.innerText = '（自动评分）';

                    answerButtonsElement.classList.remove('hide');

                    currentQuestion.answers.forEach(answer => {

                        const button = document.createElement('button');

                        button.innerText = `${answer.key || ''}. ${answer.text}`;

                        button.classList.add('btn');

                        button.dataset.correct = answer.correct;

                        if (answer.key) button.dataset.key = answer.key;

                        

                        if(currentQuestion.multi) {

                            button.addEventListener('click', (e) => e.currentTarget.classList.toggle('selected'));

                        } else {

                            button.addEventListener('click', selectAnswer);

                        }

                        answerButtonsElement.appendChild(button);

                    });

                    controlButton.classList.toggle('hide', !currentQuestion.multi);

                    controlButton.innerText = '提交';

                    break;

                case 'fill-in':

                    questionTitleElement.innerText = '填空题';

                    questionTypeTextElement.innerText = '（自动评分）';

                    inputContainerElement.classList.remove('hide');

                    fillInInputElement.classList.remove('hide');

                    controlButton.innerText = '提交';

                    controlButton.classList.remove('hide');

                    break;

                case 'short-answer':

                    questionTitleElement.innerText = '简答题';

                    questionTypeTextElement.innerText = '（手动阅卷）';

                    inputContainerElement.classList.remove('hide');

                    shortAnswerInputElement.classList.remove('hide');

                    controlButton.innerText = '提交';

                    controlButton.classList.remove('hide');

                    break;

            }

        }



        function resetState() {

            feedbackContainer.className = 'feedback-container hide';

            answerButtonsElement.className = 'btn-grid';

            inputContainerElement.className = 'input-container hide';

            fillInInputElement.className = 'text-input hide';

            shortAnswerInputElement.className = 'textarea-input hide';

            

            fillInInputElement.value = '';

            shortAnswerInputElement.value = '';

            

            while (answerButtonsElement.firstChild) {

                answerButtonsElement.removeChild(answerButtonsElement.firstChild);

            }

            

            controlButton.disabled = false;

        }



        function selectAnswer(e) {

            const selectedButton = e.target;

            const correct = selectedButton.dataset.correct === 'true';

            handleAnswer(correct, selectedButton.innerText);

            Array.from(answerButtonsElement.children).forEach(button => {

                if (button.dataset.correct === 'true') button.classList.add('correct');

                button.disabled = true;

            });

            if (!correct) selectedButton.classList.add('wrong');

        }

        

        function handleMultiChoiceSubmit() {

            const selectedButtons = answerButtonsElement.querySelectorAll('.btn.selected');

            if (selectedButtons.length === 0) {

                alert('请选择答案！');

                return;

            }

            const currentQuestion = questions[currentQuestionIndex];

            const selectedKeys = Array.from(selectedButtons).map(btn => btn.dataset.key);

            const correctKeys = currentQuestion.answer;

            

            const isCorrect = selectedKeys.length === correctKeys.length && selectedKeys.every(key => correctKeys.includes(key));

            

            const userAnswerText = selectedKeys.join(', ');

            handleAnswer(isCorrect, userAnswerText);



            Array.from(answerButtonsElement.children).forEach(button => {

                const key = button.dataset.key;

                if (correctKeys.includes(key)) {

                    button.classList.add('correct');

                } else if (selectedKeys.includes(key)) {

                    button.classList.add('wrong');

                }

                button.disabled = true;

            });

        }



        function handleFillInSubmit() {

            const userAnswer = fillInInputElement.value.trim();

            if (userAnswer === '') { alert('请输入答案！'); return; }

            const correctAnswer = questions[currentQuestionIndex].answer;

            const isCorrect = userAnswer.toLowerCase() === correctAnswer.toLowerCase();

            handleAnswer(isCorrect, userAnswer);

        }

        

        function handleShortAnswerSubmit() {

            const userAnswer = shortAnswerInputElement.value.trim();

            if (userAnswer === '') { alert('请输入答案！'); return; }

            handleAnswer(null, userAnswer);

        }



        function handleAnswer(isCorrect, userAnswer) {

            if (isCorrect) score++;

            answeredQuestions.push({ ...questions[currentQuestionIndex], userAnswer, isCorrect });

            showFeedback(isCorrect);

            controlButton.disabled = true;

            setTimeout(() => {

                currentQuestionIndex++;

                if (currentQuestionIndex < questions.length) {

                    showQuestion();

                } else {

                    showResults();

                }

            }, 2500);

        }



        function showFeedback(isCorrect) {

            const currentQuestion = questions[currentQuestionIndex];

            feedbackContainer.classList.remove('hide');

            if (isCorrect === null) {

                feedbackContainer.className = 'feedback-container info-feedback';

                feedbackContainer.innerHTML = `<span class="feedback-title">回答已提交。</span>此题将由人工阅卷。`;

            } else if (isCorrect) {

                feedbackContainer.className = 'feedback-container correct-feedback';

                feedbackContainer.innerHTML = `<span class="feedback-title">回答正确！</span> ${currentQuestion.explanation || ''}`;

            } else {

                feedbackContainer.className = 'feedback-container wrong-feedback';

                const correctAnswerText = currentQuestion.multi ? currentQuestion.answer.join(', ') : (currentQuestion.answers ? currentQuestion.answers.find(a => a.correct).text : currentQuestion.answer);

                feedbackContainer.innerHTML = `<span class="feedback-title">回答错误。</span>正确答案是：<b>${correctAnswerText}</b><br>${currentQuestion.explanation || ''}`;

            }

        }



        function showResults() {

            quizContainer.classList.add('hide');

            resultsContainer.classList.remove('hide');

            

            const finalScore = autoGradableQuestionsCount > 0 ? Math.round((score / autoGradableQuestionsCount) * 100) : 0;

            scoreTextElement.innerText = `${finalScore}`;

            

            wrongAnswersListElement.innerHTML = '';

            shortAnswersListElement.innerHTML = '';

            

            const wrongAutoGraded = answeredQuestions.filter(q => q.isCorrect === false);

            if(wrongAutoGraded.length === 0) {

                 wrongAnswersListElement.innerHTML = '<p style="text-align:center; color: var(--correct-color);">恭喜！选择题与填空题全部回答正确！</p>';

            } else {

                wrongAutoGraded.forEach(item => wrongAnswersListElement.appendChild(createReviewItem(item)));

            }

            answeredQuestions.filter(q => q.type === 'short-answer').forEach(item => shortAnswersListElement.appendChild(createReviewItem(item)));

        }

        

        function createReviewItem(item) {

            const itemElement = document.createElement('div');

            itemElement.classList.add('review-item');

            if (item.isCorrect === false) itemElement.classList.add('wrong-item');



            let correctAnswerText = '';

            if (item.type === 'multiple-choice') {

                correctAnswerText = item.multi ? item.answer.join(', ') : item.answers.find(a => a.correct).text;

            } else {

                correctAnswerText = item.answer;

            }



            const correctAnswerHTML = `<p class="correct-answer"><span class="answer-label">${item.type === 'short-answer' ? '参考答案' : '正确答案'}：</span>${correctAnswerText}</p>`;

            const userAnswerHTML = `<p class="user-answer ${item.isCorrect === false ? 'wrong' : ''}"><span class="answer-label">你的答案：</span>${item.userAnswer}</p>`;

            const explanationHTML = item.explanation ? `<p class="explanation"><span class="answer-label">解析：</span>${item.explanation}</p>` : '';



            itemElement.innerHTML = `<p class="question">${item.question}</p>${userAnswerHTML}${correctAnswerHTML}${item.type !== 'short-answer' ? explanationHTML : ''}`;

            return itemElement;

        }



        function generateFeishuCard() {

            const finalScore = autoGradableQuestionsCount > 0 ? Math.round((score / autoGradableQuestionsCount) * 100) : 0;

            

            const card = {

                "config": { "wide_screen_mode": true },

                "header": {

                    "title": { "tag": "plain_text", "content": "“匠小二”产品知识考核结果" },

                    "template": finalScore > 80 ? "green" : (finalScore > 60 ? "orange" : "red")

                },

                "elements": [

                    {

                        "tag": "div",

                        "fields": [

                            { "is_short": true, "text": { "tag": "lark_md", "content": `**考试人:**\n${userName}` } },

                            { "is_short": true, "text": { "tag": "lark_md", "content": `**客观题得分:**\n**${finalScore} / 100**` } },

                            { "is_short": false, "text": { "tag": "lark_md", "content": "" } },

                            { "is_short": true, "text": { "tag": "lark_md", "content": `**考试时间:**\n${startTime.toLocaleString('zh-CN')}` } }

                        ]

                    },

                    { "tag": "hr" }

                ]

            };



            const wrongAutoGraded = answeredQuestions.filter(q => q.isCorrect === false);

            if (wrongAutoGraded.length > 0) {

                card.elements.push({ "tag": "div", "text": { "tag": "lark_md", "content": "**错题回顾**" } });

                wrongAutoGraded.forEach(item => {

                    const correctAnswer = item.multi ? item.answer.join(', ') : (item.answers ? item.answers.find(a => a.correct).text : item.answer);

                    card.elements.push({

                        "tag": "div",

                        "text": { "tag": "lark_md", "content": `**问题:** ${item.question}\n- <font color='red'>你的答案: ${item.userAnswer}</font>\n- <font color='green'>正确答案: ${correctAnswer}</font>` }

                    });

                });

                card.elements.push({ "tag": "hr" });

            }



            const shortAnswers = answeredQuestions.filter(q => q.type === 'short-answer');

            if (shortAnswers.length > 0) {

                card.elements.push({ "tag": "div", "text": { "tag": "lark_md", "content": "**简答题回顾 (请人工批阅)**" } });

                shortAnswers.forEach(item => {

                    card.elements.push({

                        "tag": "div",

                        "text": { "tag": "lark_md", "content": `**问题:** ${item.question}\n**回答:** ${item.userAnswer}` }

                    });

                });

            }



            return { "msg_type": "interactive", "card": card };

        }



        async function sendToFeishu() {

            const btn = feishuResultsBtn;

            btn.innerText = '正在发送...';

            btn.disabled = true;



            const payload = generateFeishuCard();



            try {

                const response = await fetch(feishuWebhookUrl, {

                    method: 'POST',

                    headers: { 'Content-Type': 'application/json' },

                    body: JSON.stringify(payload)

                });



                if (response.ok) {

                    const result = await response.json();

                    if (result.StatusCode === 0 || result.code === 0) {

                        btn.innerText = '发送成功！';

                        btn.style.backgroundColor = 'var(--correct-color)';

                    } else {

                        throw new Error(`Feishu API Error: ${result.msg || result.message}`);

                    }

                } else {

                    throw new Error(`Network response was not ok: ${response.statusText}`);

                }

            } catch (error) {

                console.error('Error sending to Feishu:', error);

                btn.innerText = '发送失败，请重试';

                btn.style.backgroundColor = 'var(--wrong-color)';

                btn.disabled = false;

            }

        }



        init();

    </script>

</body>

</html>